const sass = require('sass')
const loadGruntTasks = require('load-grunt-tasks') // 可不用每次都导入插件

// 以下 grunt.initConfig 中的内容可合并为一个

// grunt 插件们
module.exports = grunt => {
  /**
   * grunt-contrib-clean 删除文件
   * 目标名定为 temp，值为 temp 目标的配置项
   */
  grunt.initConfig({
    clean: {
      temp: 'temp/app.js', // 指定文件
      temp2: 'temp/*.txt', // 通配符的形式，删除一类文件
      temp3: 'temp/**' // 删除temp以及下子目录以及子目录下所有文件
    }
  })
  // 使用 `loadNpmTasks` 加载  `grunt-contrib-clean`，用来自动清除项目中产生的临时文件
  grunt.loadNpmTasks('grunt-contrib-clean')


  /**
   * grunt-sass 将 scss 编译为 css 文件
   * 为 sass 任务配置 main 目标，指定 sass 的输入文件 以及输出的css 文件路径
   * files 的键为目标路径，值为原始路径
   * implementation 是用来指定 grunt-sass 中使用哪个模块进行编译
   * sourceMap: 可生成对应的 sourcemap
   * 其他信息可参考 grunt-sass 官网
   */
  grunt.initConfig({
    sass: {
      options: {
        sourceMap: true,
        implementation: sass
      },
      main: {
        files: {
          'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    }
  })
  grunt.loadNpmTasks('grunt-sass')


  /**
   * grunt-babel 将 ECMAScript 新特性 编译为 es5
   * 使用用 files 指定输入输出内容
   * babel 也需要设置选项：presets（ECMAScript中需要转换的最新特性，打包形成preset）
   * env 会根据最新的特性做对应的转换
   */
  grunt.initConfig({
    babel: {
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env']
      },
      main: {
        files: {
          'dist/js/app.js': 'src/js/app.js'
        }
      }
    }
  })
  // loadGruntTasks 会自动加载所有插件任务
  loadGruntTasks(grunt)


  /**
   * grunt-contrib-watch 改变文件后自动编译
   * 添加 js 目标监视 js 变化
   */
  grunt.initConfig({
    sass: {
      options: {
        sourceMap: true,
        implementation: sass
      },
      main: {
        files: {
          'dist/css/main.css': 'src/scss/main.scss'
        }
      }
    },
    babel: {
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env']
      },
      main: {
        files: {
          'dist/js/app.js': 'src/js/app.js'
        }
      }
    },
    watch: {
      options: {
        sourceMap: true,
        presets: ['@babel/preset-env']
      },
      js: {
        files: ['src/js/*.js'], // 数组内容为需要被监视的文件
        tasks: ['babel'], // 当文件发生改变时需要执行什么任务【任务要写在一个 initConfig 里】
      },
      css: {
        files: ['src/scss/*.scss'],
        tasks: ['sass'], // sass 最早的扩展名为 sass，但语法规范不易接受，新语法规范使用 scss 作为扩展名
      }
    }
  })
  // loadGruntTasks 在同一个文件只写一个就可
  loadGruntTasks(grunt)

  // watch 一开始并不执行 sass & babel，因此可以为 watch 做一个映射
  grunt.registerTask('default', ['sass', 'babel', 'watch'])
}